<template>
  <div class="player">
    <!--模糊背景-->
    <div
      class="backgroundCover"
      v-if="bg"
      :style="'background-image:url(' + bg + ')'"
    ></div>
    <!--播放器部分-->
    <div class="body">
      <!--歌曲名-->
      <div class="songName">
        <span class="songNameTitle">
          {{ playDetail.name == undefined ? "" : playDetail.name }}
        </span>
        <span class="songNameArtist">
          {{
            playDetail.artist == undefined ? "" : "-" + playDetail.artist + "-"
          }}
        </span>
      </div>
      <!--歌词-->
      <div class="lrc">
        <div id="lrc">
          <p
            v-for="(item, index) in lrcArr"
            :key="index"
            :id="'lrcItem' + index"
            :class="index == lrcTimeLine ? 'lrcP lrcpaction' : 'lrcP'"
          >
            {{ item }}
          </p>
        </div>
      </div>
      <!--歌曲播放控制-->
      <div class="tools">
        <VueSlider
          class="songTimeLine"
          :lazy="true"
          tooltip="none"
          :dotSize="[20, 20]"
          height="4px"
          width="100%"
          v-if="timeLine !== false"
          :value="timeLine"
          @change="timeLineChange"
        ></VueSlider>
        <div class="toolsBox1">
          <span style="font-size:20px;width:25%;">
            {{ $common.fromDate("i:s", play.playTimeLine) }}/{{
              $common.fromDate("i:s", play.playAllTime)
            }}
          </span>
          <span
            class="iconfont icon-shangyishou"
            @click="playUpSong"
            v-items="{ default: true }"
          ></span>
          <span
            class="iconfont icon-bofang"
            v-if="play.play != 1"
            @click="playSong"
            v-items
          ></span>
          <span
            class="iconfont icon-zanting"
            v-if="play.play == 1"
            @click="pauseSong"
            v-items
          ></span>
          <span
            class="iconfont icon-xiayishou"
            @click="playDownSong"
            v-items
          ></span>
        </div>
        <div class="toolsBox2">
          <span
            :class="
              'iconfont ' +
                (play.playModel == 1
                  ? 'icon-yuanxunhuanbofang'
                  : 'icon-suijibofang')
            "
            @click="changePlayModel"
            v-items
          ></span>
          <span
            class="iconfont icon-liebiao"
            v-items
            ref="liebiao"
            @click="playListStatus = !playListStatus"
            @up="listup"
          ></span>
          <!-- <span
            class="iconfont icon-yinliang"
            v-items
            @click="volumeStatus = !volumeStatus"
          ></span>-->
        </div>
      </div>
      <!--播放列表-->
      <div id="playSongList" class="playSongList" v-if="playListStatus">
        <div
          class="playSongItem"
          v-for="(item, index) in play.playList"
          :key="index"
          @click="gotoplaySong(item)"
          v-items
          :ref="'playListItem' + index"
          :id="'playListItem' + index"
          @down="playListDown(index)"
          @up="playListUp(index)"
        >
          <span v-if="item.id != play.playId">{{ index + 1 }}</span>
          <span
            v-else
            class="iconfont icon-bofang"
            style="color:#55c2f7!important"
          ></span>
          <span
            class="textline"
            :style="item.id == play.playId ? 'color:#55c2f7!important' : ''"
            >{{ item.name }}</span
          >
        </div>
      </div>
      <!--声音调节-->
      <div class="playVolume" v-if="volumeStatus">
        <VueSlider
          class="VolumeTimeLine"
          direction="btt"
          :lazy="true"
          tooltip="none"
          :dotSize="[20, 20]"
          height="100%"
          width="4px"
          v-if="volum"
          :value="volum"
          @change="VolumeChange"
        ></VueSlider>
      </div>
    </div>
  </div>
</template>

<script>
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/default.css";
var VueScrollTo = require("vue-scrollto");
var lrcArrTime = 0;
export default {
  components: {
    VueSlider
  },
  computed: {
    playDetail() {
      return this.$player.getSongDetail(this);
    },
    play() {
      return this.$store.getters.getPlayer;
    },
    timeLine() {
      return this.$player.getPlayerPlayTimeLine(this);
    },
    volum() {
      return this.$store.getters.getSysVolume;
    }
  },
  data() {
    return {
      lrcArr: false,
      lrcTimeLine: false,
      playListStatus: false,
      bg: false,
      volumeStatus: false
    };
  },
  watch: {
    playDetail(newValue) {
      if (newValue) {
        this.$api.getLrcArr(this);
        this.bg = newValue.cover;
      }
    },
    "play.playTimeLine"(newValue) {
      let value = parseInt(newValue);
      if (this.lrcArr[value] && lrcArrTime != value) {
        this.lrcTimeLine = value;
        this.scoll("#lrcItem" + value, "#lrc", false, true, 100);
        lrcArrTime = value;
      }
    }
  },
  created() {
    // window.android.setMoiveStatus("2");
    if (this.play.playLrcArr) {
      this.lrcArr = this.play.playLrcArr;
    }
    if (this.playDetail) {
      this.bg = this.playDetail.cover;
    }
  },
  methods: {
    gotoplaySong(item) {
      this.lrcArr = [];
      this.$player.play(this, item);
    },
    playSong() {
      this.play.playerObj.play();
      this.$store.commit("setPlayer", ["play", 1]);
    },
    pauseSong() {
      this.play.playerObj.pause();
      this.$store.commit("setPlayer", ["play", 2]);
    },
    timeLineChange(e) {
      let time = parseInt((e / 100) * this.play.playAllTime);
      this.play.playerObj.currentTime = time;
    },
    VolumeChange(e) {
      this.$android.plusSetVolume(this, (e / 100).toFixed(1));
    },
    playUpSong() {
      this.lrcArr = [];
      this.$player.playUpSong(this);
    },
    playDownSong() {
      this.lrcArr = [];
      this.$player.playDownSong(this);
    },
    changePlayModel() {
      if (this.play.playModel == 1) {
        this.$store.commit("setPlayer", ["playModel", 2]);
      } else {
        this.$store.commit("setPlayer", ["playModel", 1]);
      }
    },
    scoll(item, itemId, x, y, duration) {
      this.lrcScrollStatus = true;
      let element = item;
      var options = {
        container: itemId,
        easing: "linear",
        offset: -100,
        force: true,
        cancelable: true,
        x: x,
        y: y
      };
      VueScrollTo.scrollTo(element, duration, options);
    },
    listup() {
      let playListIndex = this.play.playList.length - 1;
      this.$service.move(this.$refs["playListItem" + playListIndex][0]);
      this.scoll(
        "#playListItem" + playListIndex,
        "#playSongList",
        false,
        true,
        100
      );
    },
    playListDown(index) {
      let playIndex = this.play.playList.length - 1;
      if (index == playIndex) {
        this.$service.move(this.$refs["liebiao"]);
      } else {
        this.$service.move(this.$refs["playListItem" + (index + 1)][0]);
        this.scoll(
          "#playListItem" + (index + 1),
          "#playSongList",
          false,
          true,
          100
        );
      }
    },
    playListUp(index) {
      if (index == 0) {
        return false;
      } else {
        this.$service.move(this.$refs["playListItem" + (index - 1)][0]);
        this.scoll("#playListItem" + index, "#playSongList", false, true, 100);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.player {
  background-color: #25272d;
  //background-color: #444851;
  //background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.51' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
.backgroundCover {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  filter: blur(20px);
  z-index: 10;
}

.body {
  width: 100%;
  height: 100vh;
  z-index: 20;
  //   background: hsla(0, 0%, 100%, 0.25) border-box;
}
.body > div {
  z-index: 20;
}
.body > div,
.body > div > span,
.body > div > div > p,
.body > div > div {
  z-index: 20;
}
.backgroundCoverBlur {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  width: 100%;
  height: 85vh;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  //   filter: blur(20px);
  z-index: 10;
  filter: blur(20px);
}
.songName {
  width: 100%;
  height: 16vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
}
.songNameTitle {
  font-size: 20px;
}
.songNameArtist {
  font-size: 16px;
}
.lrc {
  width: 100%;
  height: 74vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#lrc {
  height: 80%;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow-y: auto;
}
// 去除滚动条
#lrc::-webkit-scrollbar {
  display: none;
}
.lrcP {
  font-size: 16px;
  color: #fff;
  line-height: 40px;
  transition: 300ms;
}
.lrcpaction {
  color: #55c2f7 !important;
  font-size: 20px !important;
}
.tools {
  width: 100%;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.songTimeLine {
  position: fixed;
  bottom: 39px;
  width: 98% !important;
  padding: 7px 0px !important;
  z-index: 99;
}
.toolsBox1 {
  width: 60%;
}
.toolsBox2 {
  width: 40%;
}
.toolsBox1,
.toolsBox2 {
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.toolsBox1 > span,
.toolsBox2 > span {
  color: #fff;
  font-size: 26px;
  width: 16%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
}

.playSongList {
  width: 30%;
  height: 90vh;
  position: fixed;
  right: 0;
  bottom: 10vh;
  background: rgba(0, 0, 0, 0.6);
  overflow-y: auto;
}

.playSongList::-webkit-scrollbar {
  display: none;
}

.playSongItem {
  padding: 0px 20px;
  height: 8vh;
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 4px;
}
.playSongItem > span {
  font-size: 16px;
  color: #fff;
  margin: 0px 20px;
}
.playVolume {
  width: 50px;
  height: 100px;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  bottom: 45px;
  right: 100px;
  display: flex;
  justify-content: center;
  padding: 20px 0px;
}
</style>
